<template>
	<view class="QS-Form-Item" ref="QS-Form-Item" :class="getClass" :style="getStyle">
		<view class="label"
			:style="{ width: getLabelWidth, justifyContent: getLabelPosition == 'right'?'flex-end':'flex-start' }">
			<text class="" :style="{ color: themes[getTheme] }" v-if="getRequired">*</text>
			<text :style="{ fontSize: getFontSize + 'px' }">{{label}}</text>
		</view>
		<view class="content" :class="[ getLabelPosition == 'top'?'mg-top':'mg-left' ]">
			<slot></slot>
			<view class="validate-state" :class="[{ 'validate-state-fixed': getValidateStateFixed }]"
				v-if="!validateStatus">
				<text :style="{ fontSize: getFontSize + 'px', color: themes['danger'] }">{{validateMessage}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import styleObj2String from '../../js/functions/styleObj2String.js';
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import getIsMountedMixin from '../../js/QS-Form/mixins/getIsMountedMixin.js';
	import getParentOfName from '../../js/functions/getParentOfName.js';
	let props;
	try {
		props = require('@/QS-UI-CONFIG/components/QS-Form-Item/js/props.js');
	} catch (e) {
		//TODO handle the exception
		props = {};
	}

	const isMountedMixin = getIsMountedMixin();
	const componentType = 'QS-Form-Item';
	const QSComponentMixinRes = QSComponentMixin({
		componentType,
		nodeName: '.QS-Form-Item'
	});
	const formItems = {};
	const example = function() {
		return {
			name: componentType,
			mixins: [
				isMountedMixin,
				QSComponentMixinRes.mixin,
			],
			provide() {
				return {
					QSFormItem: this
				}
			},
			// #ifndef MP-ALIPAY
			inject: ['QSForm'],
			// #endif
			props: {
				// #ifdef MP-ALIPAY
				...QSComponentMixinRes.props,
				// #endif
				label: {
					type: String,
					default: ''
				},
				labelWidth: {
					type: [String, Number],
					default: ''
				},
				required: {
					type: [String, Boolean],
					default: false
				},
				labelPosition: {
					type: String,
					default: ''
				},
				validateStateFixed: {
					type: [String, Boolean],
					default: ''
				},
				...props,
				dynamicForm: {
					type: Boolean,
					default: false
				}
			},
			computed: {
				getRequired() {
					if(this.nRequired) return true;
					
					if (this.elRequireds.find(i => i.required)) {
						return true;
					}
					return String(this.required) === 'true';
				},
				getLabelWidth() {
					
					if (this.getLabelPosition == 'top') return '';
					if (this.labelWidth) return this.labelWidth;
					
					if(this.nLabelWidth) return this.nLabelWidth;
					
					if (this.isMounted) {
						const QSForm = getParentOfName('QS-Form', this);
						if (QSForm?.labelWidth) return QSForm.labelWidth;
					}
					return '';
				},
				getLabelPosition() {
					if (this.labelPosition) return this.labelPosition;
					
					if(this.nLabelPosition) return this.nLabelPosition;
					
					if (this.isMounted) {
						const QSForm = getParentOfName('QS-Form', this);
						if (QSForm?.labelPosition) return QSForm.labelPosition;
					}
					return 'right';
				},
				getTheme() {
					if (this.theme) return this.theme;
					
					if(this.nTheme) return this.nTheme;
					
					if (this.isMounted) {
						const QSForm = getParentOfName('QS-Form', this);
						if (QSForm?.theme) return QSForm.theme;
					}
					return 'primary';
				},
				QS_nCompStyle() {
					const obj = {}
					if (this.getLabelPosition == 'top') {
						obj['flex-direction'] = 'column';
					} else {
						obj['flex-direction'] = 'row';
					}
					return styleObj2String(obj);
				},
				getValidateStateFixed() {
					if (this.validateStateFixed !== '') return String(this.validateStateFixed) == 'true';
					
					if(this.nValidateStateFixed) return true;
					
					if (this.isMounted) {
						const QSForm = getParentOfName('QS-Form', this);
						if (QSForm && QSForm.validateStateFixed !== '') return String(QSForm.validateStateFixed) ==
							'true';
					}
					return true;
				}
			},
			data() {
				return {
					validateStatus: true,
					validateMessage: '',
					elRequireds: [],
					
					
					// 支付宝动态表单专用
					nRequired: false,
					nLabelWidth: '',
					nLabelPosition: '',
					nTheme: '',
					nValidateStateFixed: false
				}
			},
			created() {
				formItems[this.componentId] = {};
				formItems[this.componentId].elObj = [];
			},
			mounted() {
				// #ifdef MP-ALIPAY
				if (this.dynamicForm) return;
				// #endif
				this.setInParent();
			},
			beforeDestroy() {
				try {
					delete formItems[this.componentId];

					// #ifdef MP-ALIPAY
					if (this.dynamicForm) return;
					// #endif
					this.removeInParent();
				} catch (e) {
					//TODO handle the exception
				}
			},
			methods: {
				// 支付宝动态表单专用
				setRequired(required) {
					this.nRequired = required;
				},
				setLabelWidth(labelWidth) {
					this.nLabelWidth = labelWidth;
				},
				setLabelPosition(labelPosition) {
					this.nLabelPosition = labelPosition;
				},
				setTheme(theme) {
					this.nTheme = theme;
				},
				setValidateStateFixed(validateStateFixed) {
					this.nValidateStateFixed = validateStateFixed;
				},
				// 支付宝动态表单专用 over
				
				setValidateState(obj = {}) {
					const {
						validateStatus,
						validateMessage
					} = obj;
					if (validateStatus === true) {
						if (!this.validateStatus) this.validateStatus = true;
						this.validateMessage = '';
					} else if (validateStatus === false) {
						if (this.validateStatus) this.validateStatus = false;
						this.validateMessage = validateMessage;
					}
				},
				setInParent() {
					const QSForm = getParentOfName('QS-Form', this);
					if (QSForm?.setFormItem && typeof QSForm.setFormItem == 'function') {
						QSForm.setFormItem(this);
					} else {
						console.log('找不到form')
						console.warn('找不到form')
					}
				},
				removeInParent() {
					const QSForm = getParentOfName('QS-Form', this);
					if (QSForm?.removeFormItem && typeof QSForm?.removeFormItem == 'function') {
						QSForm.removeFormItem(this);
					} else {
						console.log('找不到form')
						console.warn('找不到form')
					}
				},
				setElObj(elObj = []) {
					if(!formItems[this.componentId]) formItems[this.componentId] = {};
					formItems[this.componentId].elObj = elObj;
				},
				setEl(el) {
					if (-1 == formItems[this.componentId].elObj.findIndex(i => i == el)) {
						formItems[this.componentId].elObj.push(el);
					}
				},
				removeEl(el) {
					if (!formItems[this.componentId]?.elObj) return;
					const ind = formItems[this.componentId].elObj.findIndex(i => i == el);
					if (-1 != ind) {
						formItems[this.componentId].elObj.splice(ind, 1);
					}

					const ind2 = this.elRequireds.findIndex(i => i.prop == el.prop);
					if (-1 != ind2) {
						this.elRequireds.splice(ind2, 1);
					}
				},
				getEl() {
					return formItems[this.componentId].elObj;
				},
				setElRequired(el, bl) {
					const obj = this.elRequireds.find(i => i.prop == el.prop);
					if (!obj) {
						this.elRequireds.push({
							prop: el.prop,
							required: bl
						});
						return;
					}
					obj.required = bl;
				}
			}
		}
	}
	export default example();
</script>

<style scoped>
	.QS-Form-Item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 12px;
	}

	.label {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 10rpx;
	}

	.content {
		flex: 1;
		width: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: relative;
	}

	.validate-state {}

	.validate-state-fixed {
		position: absolute;
		bottom: 0;
		transform: translateY(100%);
	}

	.mg-left {
		margin-left: 12px;
	}

	.mg-top {
		margin-top: 8px;
	}
</style>
